'use client'

import MyFriend from '@/components/friend/MyFriend'
import FriendRequest from '@/components/friend/FriendRequest'
import { useDrag } from '@/contexts/DragContext'
import { message, Tabs } from 'antd'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

type TabKey = 'friends' | 'requests'

export default function FriendPage() {
	const router = useRouter()
	const { handleMouseDown } = useDrag()
	const [messageApi, contextHolder] = message.useMessage()
	const [activeTab, setActiveTab] = useState<TabKey>('friends')

	// 标签页配置
	const tabItems = [
		{
			key: 'friends',
			label: '我的好友',
			children: <MyFriend />,
		},
		{
			key: 'requests',
			label: '好友申请',
			children: <FriendRequest />,
		},
	]

	return (
		<div className="h-full flex flex-col">
			{contextHolder}
			{/* 标题区域 */}
			<div className="h-20 px-8 border-b border-gray-700 flex items-center">
				{/* 左侧标题区域 - 可拖拽 */}
				<div
					className="flex-1 h-full flex items-center cursor-grab active:cursor-grabbing"
					onMouseDown={handleMouseDown}
				>
					<h1 className="text-2xl font-bold select-none">好友管理</h1>
				</div>
			</div>

			{/* 主内容区域 */}
			<div className="flex-1 p-8 overflow-y-auto">
				<Tabs
					activeKey={activeTab}
					items={tabItems}
					onChange={(key) => setActiveTab(key as TabKey)}
					className="w-full"
				/>
			</div>
		</div>
	)
}
